import React, { useRef, useState } from 'react'

export default function App () {
  const [isPlaying, setIsPlaying] = useState(false);
  const playRef = useRef(null);

  function handleClick () {
    const nextIsPlaying = !isPlaying
    setIsPlaying(nextIsPlaying)
    if (nextIsPlaying) {
      playRef.current.play()
    } else {
      playRef.current.pause()
    }
  }
  return (
    <div>
      <button onClick={handleClick}>
        {isPlaying ? "播放" : '暂停'}
      </button>
      <div>
        <video
          width="250"
          ref={playRef}
          onPlay={() => setIsPlaying(true)}
          onPause={() => setIsPlaying(false)}
        >
          <source
            src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
            type="video/mp4"
          />
        </video>
      </div>

    </div>
  )
}
